<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
</head>
<body>
	<button type="button" id="loginBtn">登录</button>
	<button type="button" id="regBtn">注册</button>
	<button type="button" id="otherBtn">其他</button>
	<script type="text/javascript">
		// 创建一个通用惰性单例
		var getSingle=function(fn){
			var result;
			return function(){
				return result || (result = fn.apply(this,arguments))
			}
		}	
		// 创建一个登录框
		var createLoginLayer = function(){
			var div = document.createElement('div')
			div.innerHTML = '这是登录框'
			div.style.display = 'none'
			document.body.appendChild(div)
			return div
		}
		var createSingleLoginLayer = getSingle(createLoginLayer)
		document.querySelector('#loginBtn').addEventListener('click',function(){
			var loginLayer = createSingleLoginLayer()
			loginLayer.style.display = 'block'
		})
		
		// 创建一个ifram
		var createIFrameLayer = function(){
			var iframe = document.createElement('iframe')
			document.body.appendChild(iframe)
			return iframe
		}
		var createSingleIFrameLayer = getSingle(createIFrameLayer)
		// 点击注册显示百度网页
		document.querySelector('#regBtn').addEventListener('click',function(){
			var iframeLayer = createSingleIFrameLayer()
			iframeLayer.src='https://www.baidu.com'
		})
		// 点击其他显示360搜索网页
		document.querySelector('#otherBtn').addEventListener('click',function(){
			var iframeLayer = createSingleIFrameLayer()
			iframeLayer.src='https://www.so.com'
		})
	</script>
</body>

</html>